<style lang="scss" scoped>
    .fit{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        text-align: center;
        .item{
            padding:20px;
            box-sizing: border-box;
            border-radius:4px;
            border:1px solid rgba(238,238,238,1);
            width:590px;
            height: 280px;
            margin-bottom: 20px;
            img{
                margin:20px auto 0;
            }
            h3{
                padding: 0;
                margin:0;
                color: #3D85FD;
                font-weight: bold;
                font-size: 16px;
                border-bottom: 1px solid #eee;
                line-height: 60px;
            }
            ul{
                display: flex;
                margin:0;
                margin-top: 20px;
                padding:0;
                li{
                    border:1px solid #ccc;
                    width:34px;
                    height: 34px;
                    line-height: 34px;
                    margin-right: 10px;
                    border-radius: 3px;
                    overflow: hidden;
                    cursor: pointer;
                    a{
                        display: block;
                        width:100%;
                        height: 100%;
                    }
                    &:hover{
                        border:0;
                        background: #3D85FD;
                        color: #fff;
                        a{
                            text-decoration: none;
                            color: #fff;
                        }
                    }
                }
            }
            
            ul::before{
                content: attr(name);
                line-height: 30px;
                margin-right: 10px;
            }
        }
    }
    
    
</style>
<template>
    <div class="fit">
        <div class="item" v-for="val in flt" :key="val.ico">
            <img :src="require(`@/assets/trademark_classify/icon${val.ico}.svg`)">
            <h3>{{val.name}}</h3>
            <ul name="核心分类：">
                <li v-for="v in val.core" :key="v"><router-link :to="{name:'classify_detail',query:{code:v}}">{{v}}</router-link></li>
            </ul>
            <ul name="关联分类：">
                <li v-for="v in val.related" :key="v"><router-link :to="{name:'classify_detail',query:{code:v}}">{{v}}</router-link></li>
            </ul>
        </div>
    </div>
</template>
<script>
import flt  from "@/assets/flt.json"
export default {
    data(){
        return {
            flt
        }
    }
}
</script>